<template>
	<div class="layout-padding template-layout">
		<el-tabs class="demo-tabs" @tab-click="handleOrderStatusClick" v-model="tab">
			<template #default>
				<div class="flex flex-between ml15 mr15">
					<div class="flex-center sd-title">订单列表</div>
					<div class="flex flex-center-content">
						<div class="ml5">
							<el-button :icon="Refresh" @click="refresh"></el-button>
						</div>
						<div class="ml5">
							<el-button :icon="Search" @click="onOpenSearch"></el-button>
						</div>
					</div>
				</div>
				<el-tab-pane label="全部" name="all">
					<OrderTable ref="OrderDialogRef"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="待付款" name="0">
					<template #default>
						<OrderTable ref="OrderDialog0Ref"></OrderTable>
					</template>
				</el-tab-pane>
				<el-tab-pane label="已支付" name="1">
					<OrderTable ref="OrderDialog1Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="已发货" name="2">
					<OrderTable ref="OrderDialog2Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="已收货" name="3">
					<OrderTable ref="OrderDialog3Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="已完成" name="4">
					<OrderTable ref="OrderDialog4Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="售后" name="5">
					<OrderTable ref="OrderDialog5Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="申请退款" name="6">
					<OrderTable ref="OrderDialog6Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="已退款" name="7">
					<OrderTable ref="OrderDialog7Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="已取消" name="8">
					<OrderTable ref="OrderDialog8Ref"></OrderTable>
				</el-tab-pane>
				<el-tab-pane label="交易关闭" name="9">
					<OrderTable ref="OrderDialog9Ref"></OrderTable>
				</el-tab-pane>
			</template>
		</el-tabs>

		<el-drawer v-model="state.show" title="搜索订单">
			<div class="mar20">
				<el-form label-width="100px">
					<el-form-item label="输入查询内容:">
						<el-input>
							<template #prepend>
								<div style="width: 130px; height: 100%">
									<el-select v-model="state.search.orderNameType" placeholder="请选择" style="margin: 0; height: 100%">
										<el-option label="订单ID" value="orderId"></el-option>
										<el-option label="订单编号" value="orderNo"></el-option>
										<el-option label="售后单号" value="userName"></el-option>
										<el-option label="支付单号" value="phone"></el-option>
										<el-option label="交易流水号" value="phone"></el-option>
									</el-select>
								</div>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="输入查询内容:">
						<el-input>
							<template #prepend>
								<div style="width: 130px; height: 100%">
									<el-select v-model="state.search.userNameType" placeholder="请选择" style="margin: 0; height: 100%">
										<el-option label="用户ID" value="userId"></el-option>
										<el-option label="用户昵称" value="orderNo"></el-option>
										<el-option label="用户手机号" value="userName"></el-option>
										<el-option label="收货人" value="phone"></el-option>
										<el-option label="收货人手机号" value="phone"></el-option>
									</el-select>
								</div>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="订单类型:">
						<el-select v-model="state.search.orderType" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="all"></el-option>
							<el-option label="商城订单" value="orderNo"></el-option>
							<el-option label="积分订单" value="userName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单来源:">
						<el-select v-model="state.search.orderSource" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="H5" value="orderNo"></el-option>
							<el-option label="微信公众号" value="userName"></el-option>
							<el-option label="微信小程序" value="phone"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="支付方式:">
						<el-select v-model="state.search.payWay" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="微信支付" value="orderNo"></el-option>
							<el-option label="钱包支付" value="userName"></el-option>
							<el-option label="积分支付" value="phone"></el-option>
							<el-option label="货到付款" value="phone"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活动类型:">
						<el-select v-model="state.search.activityType" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="拼团" value="orderNo"></el-option>
							<el-option label="秒杀" value="userName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="促销类型:">
						<el-select v-model="state.search.promotionType" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="满减" value="orderNo"></el-option>
							<el-option label="满折" value="userName"></el-option>
							<el-option label="满邮" value="phone"></el-option>
							<el-option label="满赠" value="phone"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称:">
						<el-input />
					</el-form-item>
					<el-form-item label="下单时间:">
						<el-date-picker type="datetime" placeholder="选择下单时间" style="width: 100%" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer mr20 mb20">
					<el-button @click="onCancel" size="large" type="primary">取 消</el-button>
					<el-button @click="search" size="large" type="primary">搜索</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import OrderTable from './orderTable.vue';
// const OrderTable = defineAsyncComponent(() => import('./orderTable.vue'));
import type { TabPaneName } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';

const OrderDialogRef = ref();
const OrderDialog0Ref = ref();
const OrderDialog1Ref = ref();
const OrderDialog2Ref = ref();
const OrderDialog3Ref = ref();
const OrderDialog4Ref = ref();
const OrderDialog5Ref = ref();
const OrderDialog6Ref = ref();
const OrderDialog7Ref = ref();
const OrderDialog8Ref = ref();
const OrderDialog9Ref = ref();
const state = reactive({
	show: false,
	search: {
		name: '',
		orderStatus: '',
		orderNameType: 'orderId',
		userNameType: 'userId',
		orderType: '',
		orderSource: '',
		payWay: '',
		activityType: '',
		promotionType: '',
		goodsName: '',
		orderTime: '',
	},
});

const tab = ref('all');

const onOpenSearch = () => {
	state.show = true;
};
const onCancel = () => {
	state.show = false;
};
const query: OrderQuerySearch = {};

const search = () => {};

onMounted(() => {
	tapChoice(tab.value, query);
});

const handleOrderStatusClick = (targetName: TabPaneName) => {
	const name = targetName.props.name;
	if (name == tab.value) {
		console.log('两次点击一个内容');
	} else {
		tab.value = name;
		tapChoice(name, query);
	}
};

const refresh = () => {
	console.log('刷新.....');
	tapChoice(tab.value, query);
};
const tapChoice = (name: string, query: OrderQuerySearch) => {
	switch (name) {
		case '0':
			query.orderStatus = '0';
			OrderDialog0Ref.value.init(query);
			break;
		case '1':
			query.orderStatus = '1';
			OrderDialog1Ref.value.init(query);
			break;
		case '2':
			query.orderStatus = '2';
			OrderDialog2Ref.value.init(query);
			break;
		case '3':
			query.orderStatus = '3';
			OrderDialog3Ref.value.init(query);
			break;
		case '4':
			query.orderStatus = '4';
			OrderDialog4Ref.value.init(query);
			break;
		case '5':
			query.orderStatus = '5';
			OrderDialog5Ref.value.init(query);
			break;
		case '6':
			query.orderStatus = '6';
			OrderDialog6Ref.value.init(query);
			break;
		case '7':
			query.orderStatus = '7';
			OrderDialog7Ref.value.init(query);
			break;
		case '8':
			query.orderStatus = '8';
			OrderDialog8Ref.value.init(query);
			break;
		case '9':
			query.orderStatus = '9';
			OrderDialog9Ref.value.init(query);
			break;
		default:
			query.orderStatus = '';
			OrderDialogRef.value.init(query);
	}
};
</script>

<style scoped>
.demo-tabs {
	background: #fff;
	flex: 1;
}

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

:deep(.el-tabs__header) {
	padding-left: 10px;
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}
</style>
